<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				display: inline-block;
			}
			
			.goods {
				width: 50%;
				text-align: center;
				margin: 50px auto;
			}
			
			.goods img {
				animation: myfirst 2s infinite;
			}
			
			@keyframes myfirst {
				0% {
					transform: translate(0px, 0px);
				}
				50% {
					transform: translate(0px, -10px);
				}
				100% {
					transform: translate(0px, 0px);
				}
			}
		</style>

	</head>

	<body>
		<div class="goods">
			<img src="../img/index/index_12_01_07.png" />
		</div>
		<!--
			@keyframes 规则来创建动画，你可以用百分比来规定变化发生的时间（如：0%，25%，50%，100%），或用关键词 "from" 和 "to"，等同于 0% 和 100%。
设置完动画我们需要将动画绑定到我们要实现动画的元素上去。我这个例子中，就是绑定到  .good img上  用“animation: myfirst 2s infinite;” 第一个元素值代表的是动画的名称，第二个是动画的时长，第三个表示的是动画执行的次数 infinite 表示无限次循环。
		-->
	</body>

</html>